<template>
  <div class="modifyManager common-container">
    <div class="common-top">
      <span class="left">
        <span class="go-back" @click.stop="$router.go(-1)">返回</span>
      </span>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
    <div class="common-bot">
      <div class="modify-bot">
        <el-form ref="form" :model="form" label-width="auto">
          <el-form-item required label="名称" style="width: 30%">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item required label="省份" style="width: 45%">
            <el-cascader
              ref="cascader"
              :props="{ checkStrictly: true }"
              :options="areaSelectData"
              class="full-width"
              size="large"
              v-model="form.province"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item label="城市" style="width: 45%">
            <el-cascader
              ref="cascader"
              :props="{ checkStrictly: true }"
              :options="areaSelectData"
              class="full-width"
              size="large"
              v-model="form.city"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item required label="经度" style="width: 30%">
            <el-input v-model="form.longitude"></el-input>
          </el-form-item>
          <el-form-item required label="纬度" style="width: 30%">
            <el-input v-model="form.latitude"></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="form.enable"></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import ManaApi from "@/api/";
import maps from "qqmap";

import {
  provinceAndCityData,
  CodeToText,
  TextToCode,
} from "element-china-area-data";

export default {
  name: "ModifyManager",
  data() {
    return {
      areaSelectData: provinceAndCityData,
      form: {
        city: "",
        formId: 0,
        latitude: 0,
        longitude: 0,
        name: "",
        province: "",
      },
      genderOptions: [
        {
          label: "男",
          value: "male",
        },
        {
          label: "女",
          value: "female",
        },
      ],
    };
  },
  methods: {
    codeAddress(address) {
      return new Promise((resolve, reject) => {
        //对指定地址进行解析
        this.myGeocoder.getLocation(address);
        //设置服务请求成功的回调函数
        this.myGeocoder.setComplete((result) => {
          console.log(result);
          resolve(result);
        });
        //若服务请求失败，则运行以下函数
        this.myGeocoder.setError(() => {
          this.$message.error("地址信息不正确");
          reject();
        });
      }).catch((err) => {
        reject();
      });
    },
    initMap() {
      return new Promise((resolve, reject) => {
        maps.init("3OQBZ-L7R6D-YCD46-PJJYB-FPAS7-U5BTZ", () => {
          this.myGeocoder = new qq.maps.Geocoder();
          resolve();
        });
      }).catch((err) => {
        reject();
      });
    },
    getInfo() {
      ManaApi.company
        .detail({
          targetId: this.$route.query.id,
        })
        .then((res) => {
          let city = res.data.city ? res.data.city.split(",") : [];
          this.form = {
            city,
            formId: res.data.id,
            latitude: res.data.latitude,
            longitude: res.data.longitude,
            name: res.data.name,
            province: res.data.province,
            enable: res.data.enable,
          };
        });
    },
    checkInfo() {
      if (String(this.form.name).trim() == "") {
        this.$message({
          type: "error",
          message: "请填写名称",
        });
        return false;
      }
      if (String(this.form.host).trim() == "") {
        this.$message({
          type: "error",
          message: "请填写域名",
        });
        return false;
      }
      return true;
    },
    async save() {
      if (!this.checkInfo()) {
        return;
      }
      let form = JSON.parse(JSON.stringify(this.form));
      form.city = String(form.city);
      form.province = String(form.province);
      let addStr = "";
      this.form.city.forEach((item) => {
        addStr += CodeToText[item];
      });
      let addressRes = await this.codeAddress(addStr);
      console.log(addressRes);
      form.latitude = addressRes.detail.location.lat;
      form.longitude = addressRes.detail.location.lng;
      ManaApi.company.edit(form).then((res) => {
        if (res.code == 200) {
          this.$router.go(-1);
        }
      });
    },
  },
  async mounted() {
    await this.initMap();
    if (this.$route.query.type == "edit") {
      this.getInfo();
    }
  },
};
</script>
<style scoped lang="scss">
.modifyManager {
  .modify-bot {
    width: 70%;
    padding: 30px 10px;
  }
}
</style>